<!--
	作者：ZhangXin
	时间：2020-07-22
	描述：博客关于页面
-->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="fragments::head(~{::title})">
	<title>关于</title>
</head>

	<body class="about-body">
	<!--导航-->
	<nav th:replace="fragments::menu(5)"></nav>


	<!--中间内容-->
		<div class="m-container-mini m-padded-tb-big">
			<div class="ui container">
				<div class="ui stackable grid">
					<div class="eleven wide column">
						<img src="../static/images/twg.jpg" class="ui rounded image" th:src="@{/images/twg.jpg}"/>
					</div>
					<div class="five wide column m-opacity-mini">
						<div class="ui top attached segment">
							<div class="ui header">关于我</div>
						</div>
						<div class="ui attached segment">
							<div class="ui orange basic label m-text-spaced m-margin-tb-tiny">编程</div>
							<div class="ui orange basic label m-text-spaced m-margin-tb-tiny">动漫</div>
							<div class="ui orange basic label m-text-spaced m-margin-tb-tiny">科技</div>
							<div class="ui orange basic label m-text-spaced m-margin-tb-tiny">手机</div>
							<div class="ui orange basic label m-text-spaced m-margin-tb-tiny">游戏</div>
							<div class="ui orange basic label m-text-spaced m-margin-tb-tiny">211</div>
							<div class="ui orange basic label m-text-spaced m-margin-tb-tiny">软件工程</div>
							<div class="ui orange basic label m-text-spaced m-margin-tb-tiny">学生</div>
							<div class="ui orange basic label m-text-spaced m-margin-tb-tiny">找工作</div>
						</div>
						<div class="ui attached segment">
							<div class="ui header">关于本站</div>
						</div>
						<div class="ui attached segment">
							<div class="ui teal label basic left pointing label m-text-spaced m-margin-tb-tiny">Java</div>
							<div class="ui teal label basic left pointing label m-text-spaced m-margin-tb-tiny">css</div>
							<div class="ui teal label basic left pointing label m-text-spaced m-margin-tb-tiny">js</div>
							<div class="ui teal label basic left pointing label m-text-spaced m-margin-tb-tiny">jquery</div>
							<div class="ui teal label basic left pointing label m-text-spaced m-margin-tb-tiny">semantic</div>
							<div class="ui teal label basic left pointing label m-text-spaced m-margin-tb-tiny">springboot</div>
							<div class="ui teal label basic left pointing label m-text-spaced m-margin-tb-tiny">jpa</div>
							<div class="ui teal label basic left pointing label m-text-spaced m-margin-tb-tiny">mysql</div>


						</div>
						<div class="ui attached segment">
							<a href="https://github.com/z-x-300/-Blogbackend" target="_blank" class="ui github circular icon button" data-content="点击跳转到GitHub获取源码" data-position="bottom center"><i class="github icon" ></i></a>
							<a href="https://gitee.com/Z_X_4851/blog_back_end" target="_blank" class="ui gitee circular icon button" data-content="点击跳转到Gitee获取源码" data-position="bottom center"><img src="images/gitee.png" th:src="@{/images/gitee.png}" style="width: 15px;"></a>
							<button id="wechatButton" class="ui circular icon button"><i class="weixin icon"></i></button>
							<button id="qqButton" href="#" class="ui circular icon button"><i class="qq icon"></i></button>
							<a href="#" class="ui email circular icon button" data-content="3030036133@qq.com" data-position="bottom center"><i class="envelope  icon"></i></a>
							<div class="ui wechat flowing popup transition hidden">
								<div class="ui orange basic label">
									<div class="ui images" style="font-size: inherit !important;">
										<div class="image">
											<img src="../static/images/wechat.png" th:src="@{/images/wechat.png}" alt="" class="ui rounded bordered image" style="width: 100px; height: 100px;" />
											<div style="text-align: center;">微信</div>
										</div>
									</div>
								</div>
							</div>
							<div class="ui qq flowing popup transition hidden">
								<div class="ui orange basic label">
									<div class="ui images" style="font-size: inherit !important;">
										<div class="image">
											<img src="../static/images/qq.png" th:src="@{/images/qq.png}" alt="" class="ui rounded bordered image" style="width: 100px; height: 100px;" />
											<div style="text-align: center;">QQ</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="ui bottom attached segment">
							<div class="ui header m-margin-tb-tiny" style="font-weight: bold;color: #F08047;font-family: STSong;text-align: center">打赏本站</div>
							<div class="ui orange basic label">
								<div class="ui images" style="font-size: inherit !important;">
									<div class="image">
										<img src="../static/images/alipay.png" th:src="@{/images/alipay.png}" alt="" class="ui rounded bordered image" style="width: 125px">
										<div style="text-align: center">支付宝</div>
									</div>
									<div class="image">
										<img src="../static/images/wechatpay.png" th:src="@{/images/wechatpay.png}" alt="" class="ui rounded bordered image" style="width: 125px">
										<div style="text-align: center">微信</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<!--底部内容-->
		<footer th:replace="fragments::footer"></footer>

	    <script th:replace="fragments::script"></script>

		<script>

			$('.menu.toggle').click(function() {
				$('.m-item').toggleClass('m-mobile-hide')
			})


			$('.menu.toggle').click(function() {
				$('.m-item').toggleClass('m-mobile-show');

			});
			//显示微信
			$('#wechatButton').popup({
				popup: $('.wechat.popup'),
				position: 'bottom center'
			});
			//显示qq
			$('#qqButton').popup({
				popup: $('.qq.popup'),
				position: 'bottom center'
			});
			// 显示邮箱
			$('.email').popup();

			// 显示GitHub
			$('.github').popup();

			// 显示Gitee
			$('.gitee').popup();
		</script>
	</body>

</html>